import { accomplishapi } from "@/apis/user";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Accomplishwrap } from "./styled";

export default function Accomplish() {
  const params: any = useParams();
  const [accomp, setAccomp] = useState<{
    collectcount: number;
    commentcount: number;
    essayfontcount: number;
    views: number;
  }>();
  useEffect(() => {
    accomplishapi(params.id).then((res: any) => {
      setAccomp(res.result);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <Accomplishwrap>
      <div className="title">个人成就</div>
      <div className="collectcount">
        <span className="iconfont icon-jushoucanggift"></span>文章被收藏数量
        {accomp?.collectcount}
      </div>
      <div className="commentcount">
        <span className="iconfont icon-jushoucanggift"></span>评论数量{"  "}
        {accomp?.commentcount}
      </div>
      <div className="essayfontcount">
        <span className="iconfont icon-jushoucanggift"></span>文章字数{"  "}
        {accomp?.essayfontcount}
      </div>
      <div className="views">
        <span className="iconfont icon-jushoucanggift"></span>阅读量{"  "}
        {accomp?.views}
      </div>
    </Accomplishwrap>
  );
}
